<template>
	<view v-if="isShow">
		<bottom-popup :show="popupShow" bgcolor="transparent"  @close="close">
			<view class="containers">
				<view class="popup" @click.stop="popup">
					<view class="conts"> 
						<view class="titles">请先授权登陆</view>
						<view class="desc">获取你的公开信息（昵称、头像等）</view>
						<!-- #ifdef MP-WEIXIN -->
						<button class="btn shadow" open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo">授权登陆</button>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</bottom-popup>
	</view>
</template>

<script>
	import UserApi from "@/api/user.js"
import BottomPopup from "@/components/bottom-popup/bottom-popup.vue"

export default {
	name: 'accredit',
	components: {
		BottomPopup
	},
	data() {
		return {
			popupShow: false,
			isShow: false
		};
	},
	methods: {
		show() {
			this.isShow = true
			setTimeout(()=> this.popupShow = true, 20)
		},
		close() {
			this.popupShow = false
			setTimeout(()=> this.isShow = false, 300)
		},
		bindGetUserInfo(e) {
			console.log(e)
			if (e.detail.userInfo) {
				this.$store.commit('setUserInfo', {
					nickName: e.detail.userInfo.nickName,
					avatarUrl: e.detail.userInfo.avatarUrl,
				})
				this.$store.commit('setUserAccredit', false)
				// 用户按了允许授权按钮
				UserApi.UpdateUserInfo(e.detail.userInfo)
					.then((res)=>{
						uni.showToast({
							title: '授权成功',
							icon: 'success'
						})
						// 用户按了允许授权按钮
						this.$emit('userInfo');
					})
			} else {
				//用户按了拒绝按钮
				uni.showModal({
					title: '提示',
					content: '为了更好的服务，请允许授权登录.',
					showCancel: false,
					confirmText: '返回授权',
					confirmColor: '#1BAC1A'
				});
			}
		},
		popup() {}
	}
};
</script>

<style lang="scss" scoped>
.containers{
	display: flex;
	justify-content: center;
}

.popup {
	background: $color-white;
	border-radius: 36rpx 36rpx 0 0;
	width: 100%;
	height: 472rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.conts {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.titles {
	font-size: 42rpx;
	color: #333333;
	line-height: 59rpx;
	margin-bottom: 40rpx;
}

.desc {
	font-size: 32rpx;
	color: #999999;
	line-height: 45rpx;
	margin-bottom: 90rpx;
}

.btn {
	line-height: 88rpx;
	height: 88rpx;
	width: 580rpx;
	padding: 0;
	background: $bg-color-main;
	border-radius: 44rpx;
	font-size: 36rpx;
	color: $text-color-inverse;
}

.btn::after {
	border: none;
}
</style>
